<template>
  <div class="inline">
    <el-button v-if="showpPfChannel" class="filter-item" type="primary" @click="selectPfChannel">渠道({{ channelPfSelect }})</el-button>
    <el-button v-if="showChannel" class="filter-item" type="primary" @click="selectChannel">发行渠道({{ channelSelect }})</el-button>
    <el-button v-if="showServer" class="filter-item" type="success" @click="selectServer">服务器({{ serverSelect }})</el-button>
    <el-date-picker v-if="startDateDisplay" v-model="searchForm.startDate" class="filter-item" type="date" style="width: 160px;" placeholder="开始时间"></el-date-picker>-
    <el-date-picker v-if="endDateDisplay" v-model="searchForm.endDate" class="filter-item" type="date" style="width: 160px;" placeholder="结束时间"></el-date-picker>
    <!-- 插槽：允许插入额外的筛选项 -->
    <slot name="extra-filters"></slot>
    <el-button class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter">搜索</el-button>
    <span class="filter-item"></span>
    <el-dialog :visible.sync="dialogVisible" :title="textMap[dialogType]" :close-on-click-modal="false">
      <el-checkbox v-show="isVisible" v-model="allServerChecked" @change="checkAllServer">显示全服</el-checkbox>
      <div class="server-box">
        <ul class="menu-sub">
          <li
            v-for="(sgit,index) in groupList"
            :key="index"
          >
            <el-checkbox
              v-model="sgit.flag"
              :indeterminate="itemIndeterminate(sgit)"
              @change="(val) => handleCheckAll(val, sgit)"
            >{{ sgit.sgname }}</el-checkbox>
            <el-checkbox-group
              v-model="selectedData"
              style="padding-left: 30px;"
              @change="handleChanges(sgit)"
            >
              <el-checkbox
                v-for="sgits in sgit.children"
                :key="sgits.sid"
                :label="sgits.sid"
              >{{ sgits.name }}</el-checkbox>
            </el-checkbox-group>
          </li>
        </ul>
      </div>
      <div class="tr">
        <el-button type="primary" @click="confirmSubmit()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getServerListGroup, getChannelPackageListGroup, getAllChannelList } from '@/api/ops'

export default {
  props: {
    showChannel: { type: Boolean, default: true },
    showpPfChannel: { type: Boolean, default: false },
    showServer: { type: Boolean, default: true },
    startDate: { type: Date, default: new Date() },
    endDate: { type: Date, default: new Date() },
    startDateDisplay: { type: Boolean, default: true },
    endDateDisplay: { type: Boolean, default: true }
  },
  data() {
    return {
      loading: false,
      searchForm: {
        cpids: [],
        servers: [],
        cids: [],
        startDate: this.startDate,
        endDate: this.endDate
      },
      channelSelect: '全部',
      channelPfSelect: '全部',
      serverSelect: '全部',
      isVisible: false,
      keywordList: [],
      allServerChecked: false,
      selectedData: [],
      channelSelectedData: [],
      pfchannelSelectedData: [],
      serverSelectedData: [],
      groupList: [],
      dialogVisible: false,
      dialogType: 'channel',
      textMap: {
        channel: '选择发行渠道',
        server: '选择服务器',
        pfchannel: '选择渠道'
      }
    }
  },
  created() {
    this.searchForm.startDate = this.startDate
    this.searchForm.endDate = this.endDate
  },
  methods: {
    handleFilter() {
      this.$emit('transferFilter', this.searchForm)
    },
    selectChannel() {
      this.dialogType = 'channel'
      this.dialogVisible = true
      this.isVisible = false
      this.selectedData = this.channelSelectedData
      this.channelPackageListGroup(false)
    },
    selectPfChannel() {
      this.dialogType = 'pfchannel'
      this.dialogVisible = true
      this.isVisible = false
      this.selectedData = this.pfchannelSelectedData
      this.getAllChannel(false)
    },
    selectServer() {
      this.dialogType = 'server'
      this.dialogVisible = true
      this.isVisible = true
      this.selectedData = this.serverSelectedData
      this.serverListGroup(false)
    },

    confirmSubmit() {
      if (this.dialogType === 'server') {
        this.serverSelectedData = this.selectedData
        this.searchForm.servers = this.selectedData
        if (this.selectedData.length > 0) this.serverSelect = '已选择'
      }
      if (this.dialogType === 'channel') {
        this.channelSelectedData = this.selectedData
        this.searchForm.cpids = this.selectedData
        if (this.selectedData.length > 0) this.channelSelect = '已选择'
      }
      if (this.dialogType === 'pfchannel') {
        this.pfchannelSelectedData = this.selectedData
        this.searchForm.cids = this.selectedData
        if (this.selectedData.length > 0) this.channelPfSelect = '已选择'
      }
      this.dialogVisible = false
    },

    async serverListGroup(val) {
      getServerListGroup({ all: val }).then(res => {
        this.groupList = res.data
      })
    },

    async channelPackageListGroup(val) {
      getChannelPackageListGroup({ all: val }).then(res => {
        this.groupList = res.data
      })
    },
    async getAllChannel(val) {
      getAllChannelList({ all: val }).then(res => {
        this.groupList = res.data
      })
    },
    // 全选
    handleCheckAll(val, item) {
      // 过滤掉没有选中的数据，item.child中不包含v时返回-1
      const next = item.children.map(item => item.sid)
      const filterArr = this.selectedData.filter(
        (v) => next.indexOf(v) === -1
      )
      this.selectedData = val ? filterArr.concat(next) : filterArr
    },
    itemIndeterminate(item) {
      const infoLists = item.children.map(ite => ite.sid)
      return (
        infoLists.some((v) => this.selectedData.indexOf(v) > -1) &&
        !infoLists.every((v) => this.selectedData.indexOf(v) > -1)
      )
    },
    // 勾选变化方法
    handleChanges(val) {
      const infoLists = val.children.map(ite => ite.sid)
      console.log(val)
      console.log(infoLists)
      infoLists.every((v) => {
        console.log(this.selectedData)
        if (this.selectedData.indexOf(v) > -1) {
          val.flag = true
        } else {
          val.flag = false
        }
      })
    },
    checkAllServer() {
      this.serverListGroup(this.allServerChecked)
    }
  }
}
</script>
